<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="app">

        Test
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>

    
    <span class="app">

            Test
        </span>
</body>
<style>
    .app{

        width: 100px;
        background-color: blue;
        border:2px solid red;

        padding: 10px 20px 30px 40px;
        

        /*边框样式 double双线  dotted空心圆*/
        /* border-style:dotted; 
        border-width: 10px;
        border-color: aqua;
        border-top-style:dotted;
        border-top-width: 10px;
        border-right-style: double;
        border-right-width: 10px;
        border-left-style:groove;
        border-left-width: 10px;
        border-bottom-style: inset;
        border-bottom-width: 10px; */

        /* 圆角边框 */
        /* border-radius: 10px; */
        /* 边框阴影  第一个是X轴  第二是Y轴 第三是清晰度  第四是颜色  */
        /* box-shadow: 7px 10px 5px #ffccff; */
        /* 边框图片 */
        /* border-image: url(""); */
        
        /* margin 外边距存在距离合并概念  两个div都设置了margin-top和margin-bottom 之后 上面的margin-bottom会和下面的margin-top重叠 */
        /* margin: 10px 20px 30px 40px; */
        
    }

    body{
        background-color: aquamarine;
    }

</style>
</html>